<!DOCTYPE html>
<html lang="en">

<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../css/iconfont/iconfont.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_Page">
            <div class="app_headbg">
                <div class="app_headbg1"></div>
                <div class="app_headbg2"></div>
                <div class="app_head">
                    <div class="app_head_label">二供</div>
                    <div class="app_head_input">
                        <span class="spanIcon iconfont icon-search"></span>
                        <input type="text" v-model="inputVal" placeholder="请输入搜索内容">
                    </div>
                </div>
                <div class="app_head_type">
                    <div class="app_head_typeItem">
                        <div>
                            <span class="str">今日新增 2</span>
                        </div>
                        <div class="str">522</div>
                        <div>设备总数(台)</div>
                    </div>
                    <div class="app_head_typeItem">
                        <div></div>
                        <div class="str">543</div>
                        <div>在线设备</div>
                    </div>
                    <div class="app_head_typeItem">
                        <div></div>
                        <div class="str">21</div>
                        <div>离线设备</div>
                    </div>
                </div>
            </div>
            <div class="app_main">
                <div class="app_main_list1">
                    <nut-row :gutter="10">
                        <nut-col :span="6">
                            <div class="imageSvg"></div>
                            <div class="text">泵房调度</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="imageSvg"></div>
                            <div class="text">泵房巡检</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="imageSvg"></div>
                            <div class="text">保养工单</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="imageSvg"></div>
                            <div class="text">维修工单</div>
                        </nut-col>
                    </nut-row>
                    <nut-row :gutter="10">
                        <nut-col :span="6">
                            <div class="image">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-baojingzhongxin"></use>
                                </svg>
                            </div>
                            <div class="text2">报警中心</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="image">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xunjianjihua"></use>
                                </svg>
                            </div>
                            <div class="text2">巡检计划</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="image">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xunjiankanban"></use>
                                </svg>
                            </div>
                            <div class="text2">巡检看板</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="image">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-baoyangjihua"></use>
                                </svg>
                            </div>
                            <div class="text2">保养计划</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="image">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xunjiankanban"></use>
                                </svg>
                            </div>
                            <div class="text2">保养看板</div>
                        </nut-col>
                        <nut-col :span="6">
                            <div class="image">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weixiukanban"></use>
                                </svg>
                            </div>
                            <div class="text2">维修看板</div>
                        </nut-col>
                    </nut-row>
                </div>
                <div class="app_main_list2">
                    <div class="app_main_list2Title">
                        <div class="icon"><span class="iconfont icon-alarm-full"></span></div>
                        <div class="title str">监控报警</div>
                    </div>
                    <nut-row :gutter="10">
                        <nut-col :span="8">
                            <div class="flex-content flex-contentbg1">
                                <div>全部报警</div>
                                <div>23</div>
                            </div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-content flex-contentbg2">
                                <div>普通报警</div>
                                <div>22</div>
                            </div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-content flex-contentbg3">
                                <div>严重报警</div>
                                <div>1</div>
                            </div>
                        </nut-col>
                    </nut-row>
                </div>
                <div class="app_main_list3">
                    <div class="app_main_list3Title">
                        <div class="icon">
                            <svg class="icon1" aria-hidden="true">
                                <use xlink:href="#icon-biaotitubiao"></use>
                            </svg>
                        </div>
                        <div class="title str">我的待办</div>
                    </div>
                    <nut-row :gutter="10">
                        <nut-col :span="8">
                            <div class="flex-content" @click="goPatrolPage">
                                <div>5</div>
                                <div>巡检任务</div>
                            </div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-content">
                                <div>1</div>
                                <div>保养任务</div>
                            </div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-content">
                                <div>3</div>
                                <div>维修任务</div>
                            </div>
                        </nut-col>
                    </nut-row>
                </div>
            </div>
        </div>
        <nut-tabbar @tab-switch="tabSwitch" :tabbar-list="tabList" :bottom="true">
        </nut-tabbar>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tabList: [],
                inputVal: ''
            },
            mounted() {
                this.getTablistInfo()
            },
            methods: {
                goPatrolPage() {
                    window.location.href = './patrolPage.html'
                },
                tabSwitch(value, index) {
                    console.log('当前tab点击' + value + '-----' + index)
                },
                getTablistInfo() {
                    axios('../json/tabbar.json').then((res => {
                        let tabList = res.data.data
                        tabList.map((item, index) => {
                            if (item.tabTitle == '首页') {
                                item.curr = true
                            } else {
                                item.curr = false
                            }
                        })
                        this.tabList = tabList
                    }))
                }
            }
        })
    </script>
</body>

</html>